<!--
 * @Description: 
 * @Version: 1.668
 * @Autor: 地虎降天龙
 * @Date: 2025-09-12 15:54:50
 * @LastEditors: 地虎降天龙
 * @LastEditTime: 2025-09-13 14:51:35
-->
<template>
    <TresCanvas v-bind="tcConfig">
        <TresPerspectiveCamera :position="[-5, 3, 5]" :fov="50" :near="0.1" :far="10000" />
        <OrbitControls />
        <TresAmbientLight />

        <spriteImg v-bind="spriteImgConfig" :position="[0, 1, 0]" :scale="2" />

        <reflectorShaderMesh v-bind="configState" />
    </TresCanvas>
</template>

<script setup lang="ts">
import * as THREE from 'three'
import { spriteImg } from 'PLS/UIdemo'
import { reactive, onMounted } from 'vue'
import { OrbitControls } from '@tresjs/cientos'
import reflectorShaderMesh from 'PLS/floor/components/reflectorShaderMesh.vue'
import { Pane } from 'tweakpane'

const tcConfig = {
    clearColor: '#201919',
    windowSize: true,
    shadows: true,
    toneMapping: THREE.NoToneMapping,
    toneMappingExposure: 1,
    shadowMapType: THREE.PCFSoftShadowMap,
}

const configState = reactive({
    reflectivity: 0.941,
    mirror: 113.25,
    mixStrength: 12,
    showGridHelper: true,
    scale: 1.0,
})

const spriteImgConfig = reactive({
    base64: '',
    isSprite: false,
})
const pane = new Pane({
    title: '参数',
    expanded: true,
})
const fileInput = document.createElement('input')
fileInput.type = 'file'
fileInput.accept = 'image/*'
fileInput.style.display = 'none'
document.body.appendChild(fileInput)
const inputB = pane.addButton({
    title: '替换图片',
    label: '1MB以内',
})
inputB.on('click', () => {
    if (fileInput) {
        fileInput.value = ''
        fileInput.click()
    }
})
pane.addBinding(spriteImgConfig, 'isSprite',{label:'精灵图'})

onMounted(() => {
    fileInput.onchange = (event: any) => {
        const file = event.target.files[0]
        if (!file) return
        if (file.size > 1 * 1024 * 1024) {
            alert('图片大小不能超过1MB')
            return
        }

        const reader = new FileReader()
        reader.onload = (e: any) => {
            spriteImgConfig.base64 = e.target.result
        }
        reader.readAsDataURL(file)
    }
})
</script>
